<%@include file="common/head.jspf" %>

<div id="main" role="main">
    <div id="title-bar">
        <ul id="breadcrumbs">
            <li>
                <a href="dashboard.jsp" title="Home">
                    <span id="bc-home"></span>
                </a>
            </li>
            <li ><a href="grafico.jsp">Gr&aacute;ficos</a></li>
            <li class="no-hover">Plazos Finalizaci&oacute;n Procesos</li>
        </ul>
    </div>
    <div class="shadow-bottom shadow-titlebar"></div>
    <div id="main-content">
        <div class="container_12">
            <div class="grid_4">
                <div class="block-border">
                    <div class="block-header">
                        <h1>Reporte de Plazos</h1>
                        <span></span>
                    </div>
                    <div class="block-content">
                        <div id="containerChart" style="overflow: auto"></div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<%@include file="common/bottom.jspf" %>
<script src="js/highcharts.js"></script>
<script src="js/highcharts-more.js"></script>
<script src="js/modules/exporting.js"></script>
<script type="text/javascript">
    $(function () {

        var chart = new Highcharts.Chart({

            chart: {
                renderTo: 'containerChart',
                type: 'gauge',
                plotBackgroundColor: null,
                plotBackgroundImage: null,
                plotBorderWidth: 0,
                plotShadow: false
            },

            title: {
                text: 'Monto maximo para pago demandas'
            },

            pane: {
                startAngle: -90,
                endAngle: 90,
                background: [{
                        backgroundColor: {
                            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                            stops: [
                                [0, '#FFF'],
                                [1, '#333']
                            ]
                        },
                        borderWidth: 0,
                        outerRadius: '109%'
                    }, {
                        backgroundColor: {
                            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                            stops: [
                                [0, '#333'],
                                [1, '#FFF']
                            ]
                        },
                        borderWidth: 1,
                        outerRadius: '107%'
                    }, {
                        // default background
                    }, {
                        backgroundColor: '#DDD',
                        borderWidth: 0,
                        outerRadius: '105%',
                        innerRadius: '103%'
                    }]
            },

            // the value axis
            yAxis: {
                min: 0,
                max: 125,

                minorTickInterval: 'auto',
                minorTickWidth: 1,
                minorTickLength: 10,
                minorTickPosition: 'inside',
                minorTickColor: '#666',

                tickPixelInterval: 30,
                tickWidth: 2,
                tickPosition: 'inside',
                tickLength: 10,
                tickColor: '#666',
                labels: {
                    step: 2,
                    rotation: 'auto'
                },
                title: {
                    text: '<br/><br/><br/>Millones de colones'
                },
                plotBands: [{
                        from: 0,
                        to: 30,
                        color:'#55BF3B' // green
                    }, {
                        from: 30,
                        to: 100,
                        color: '#DDDF0D' // yellow
                    }, {
                        from: 100,
                        to: 125,
                        color:   '#DF5353'// red
                    }]
            },

            series: [{
                    name: 'Millones de colones',
                    data: [80,20,50],
                    fill: ["#fc0","#666","#333"]
                }]

        });
    });
</script>
<script>
    var selected = "Ind";
</script>